<template>
    <div class="ApplicationShareDetail" style="width: 100%;padding: 15px">
        <a-collapse @change="appChange" v-model="activeKey" accordion>
            <a-collapse-panel v-for="app in shareApps" :key="app.appId">
            <span slot="header">
                <div class="system-collapse-header">
                     <div style="flex: 1;display: flex">
                          <div class="system-header-icon" :style="{'backgroundColor':app.backColor}">
                            <span v-if="app.icon">
                                 <my-icon :type="JSON.parse(app.icon).icon" v-if="getIconType(app.icon)"/>
                            <a-icon :type="JSON.parse(app.icon).icon" v-else/>
                            </span>
                              <span v-else>
                                    <img class="ownerApp-img" src="../../image/logo_white.png"/>
                              </span>
                        </div>
                    <span class="system-name" :title="getAppName(app)">{{ getAppName(app) }}</span>
                     </div>
                    <div class="system-header-name">{{i18n('shareTo','共享给')}}</div>
                    <div style="flex: 1;display: flex;justify-content: right">
                        <div class="system-header-icon" :style="{'backgroundColor':selfApp.backColor}">
                            <my-icon :type="selfApp.iconPic" v-if="getIconType(selfApp.icon)"/>
                            <a-icon :type="selfApp.iconPic" v-else/>
                        </div>
                     <span class="system-name" :title="getSelfAppName(selfApp)">{{ getSelfAppName(selfApp) }}</span>
                    </div>
                </div>
            </span>
                <div class="system-share">
                    <div class="system-share-le">
                        <ul class="system-le">
                            <li @click="shareTypesAdd(typeKey,app)" v-for="(typeObj,typeKey) in shareTypes[app.appId]" :key="typeKey"
                                :class="typeKey ==app.shareTypesKey?'system-le-li-hover system-le-li':'system-le-li'" :title="typeObj">
                                {{typeObj}}
                            </li>
                        </ul>
                    </div>
                    <div class="system-share-content">
                        <div class="system-share-name">{{shareTypes[app.appId][app.shareTypesKey]}}</div>
                        <ul>
                            <li class="system-share-li" v-for="resourceObj in resourceList">
                                <span class="system-share-span"></span>
                                <div style="width: 300px">{{resourceObj.resourceName + '('+resourceObj.resourceKey + ')'}}</div>
                                <div style="flex: 1"><my-icon style="margin-right: 5px" type="iconuser-account"></my-icon>{{resourceObj.createByName}}</div>
                                <div><my-icon style="margin-right: 5px" type="iconicon-test3"></my-icon>{{resourceObj.createTime}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>

<script>
import FormResourceShareApi from "@/api/form/core/formResourceShare";

export default {
    name: "ApplicationShareDetail",
    props: {
      shareApps: {
        type:Array
      },
      shareTypes: {
        type:Object
      },
      selfApp:{
        type:Object
      }
    },
    data() {
        return {
            activeKey: "",
            resourceList: {},
            appList:[],//应用列表权限
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
          return this.$ti18(name, text, "applicationLang", key);
        },
        init() {
            var self = this;
            if (self.shareApps.length > 0) {
              self.activeKey = self.shareApps[0].appId;
              self.appChange(self.activeKey);
            }
        },
        appChange(appId) {
            let typeAry = Object.keys(this.shareTypes[appId]);
            if (typeAry.length == 0) {
                return;
            }
            let type = typeAry[0];
            this.typeChange(type, appId);
        },
        typeChange(type, appId) {
            if (this.resourceList[appId] && this.resourceList[appId][type]) {
                return;
            }
            var self = this;
            FormResourceShareApi.queryResourceListByShareAppIdAndType(appId,this.selfApp.appId, type).then(res => {
                self.resourceList = res
                self.$set(app, type, res);
                self.initDate()
            })
        },
        shareTypesAdd(type, app){
            let self = this;
            app.shareTypesKey = type;
            FormResourceShareApi.queryResourceListByShareAppIdAndType(app.appId,this.selfApp.appId, type).then(res => {
                self.resourceList = res
            })
        },
        initDate(){
            let self = this;
            this.shareApps.filter(res=>{
                for(let shareTypesChild in self.shareTypes[res.appId]){
                    res['shareTypesKey'] = shareTypesChild
                    break
                }
            })
        },
        //点击展示数据
        appSelect(appKey,typeKey){
            for (let appObj in this.shareApps[appKey].data) {
                this.shareApps[appKey].data[appObj]['show'] = false
            }
            this.shareApps[appKey].data[typeKey]['show'] = true;
            this.$forceUpdate()
        },
        getIconType(icon) {
            let _icon = new Function('return ' + icon)();
            if (_icon && _icon.type) {
                return ['customIcon', 'userCustomIcon', 'jpaasIcon'].includes(_icon.type);
            }
            return false
        },
        getAppName(app){
            return this.$i18(app.clientName, app.clientName) + '(' + app.clientCode + ')'
        },
        getSelfAppName(selfApp){
            return this.$i18(selfApp.clientName, selfApp.clientName) + '(' + selfApp.clientCode + ')'
        }
    }
}
</script>

<style scoped>
.ownerApp-img{
    width: 20px;
    margin-top: -4px;
}
.system-share-span{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #4285f4;
    margin-right: 10px;
}
.system-share-li{
    display: flex;
    height: 40px;
    border-bottom: 1px dashed rgb(0,0,0,0.1);
    align-items: center;
}
.system-share-name{
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    text-align: left;
    color: #000000;
    opacity: 0.85;
    font-weight: bold;
}
.system-share-content {
    flex: 1;
    padding:10px 20px;
    overflow: auto;

}
.ApplicationShareDetail >>> .ant-collapse-content-box {
    padding: 0px !important;
}
.system-collapse-header{
    display: flex;
}
.system-share {
    display: flex;
    height: 300px;
}
.system-le-li {
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    padding: 0px 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.system-le-li:hover {
    background-color: #ecf3fe;
    color: #4285f4;
}

.system-le-li-hover {
    background-color: #ecf3fe;
    color: #4285f4;
}

.system-share-le {
    width: 147px;
    height: 100%;
    border-right: 1px solid #e8e8e8;
    padding: 10px 7px;
    height: 100%;
    overflow: auto;
}
.system-header-icon {
    width: 24px;
    height: 24px;
    background-color: #4285f4;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
}

.system-header-name {
    flex: 1;
    background-image: url("../../image/jiantou_2.png");
    text-align: center;
    background-position: bottom;
    background-repeat: no-repeat;
    margin: 0px 20px;
}
.system-name{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 230px;
}
</style>